<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG 转 PNG</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            /* 垂直居中 */
            justify-content: center;
            /* 水平居中 */
            background: #f7f7f7;
        }

        input {
            display: none;
        }

        #dropZone {
            width: 80%;
            /* 用 vmin 保证正方形 */
            height: 50%;
            max-width: 600px;
            max-height: 400px;
            border: 2px dashed #10b981;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #10b981;
            font-size: 1.2rem;
        }

        button {
            margin-left: 15px;
        }

        #c {
            display: none;
        }
    </style>
</head>

<body>
    <input id="file" type="file" accept="image/svg+xml">
    <div id="dropZone">
        拖拽 SVG 到此处 或 <button onclick="file.click()">点击选择</button>
    </div>
    <canvas id="c"></canvas>
    <script>
        (() => {
            let lock = false;          // 全局锁
            const file = document.getElementById('file');
            const dropZone = document.getElementById('dropZone');
            const canvas = document.getElementById('c');
            const ctx = canvas.getContext('2d');

            const convert = () => {
                if (lock) return;        // 已有任务在执行，直接忽略
                lock = true;

                const svgFile = file.files[0];
                if (!svgFile) {
                    lock = false;
                    return;
                }

                const img = new Image();
                const url = URL.createObjectURL(svgFile);

                img.onload = () => {
                    canvas.width = canvas.height = 128;
                    ctx.clearRect(0, 0, 128, 128);
                    ctx.drawImage(img, 0, 0, 128, 128);

                    canvas.toBlob(blob => {
                        if (blob) {
                            const a = document.createElement('a');
                            a.href = URL.createObjectURL(blob);
                            a.download = 'icon-128.png';
                            a.style.display = 'none';
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                            URL.revokeObjectURL(a.href);
                        }
                        lock = false;        // 任务完成，解锁
                    });
                };

                img.onerror = () => {    // 防止异常死锁
                    lock = false;
                };

                img.src = url;
            };

            // 1. 文件选择
            file.addEventListener('change', convert);

            // 2. 拖拽
            ['dragover', 'drop'].forEach(evt =>
                dropZone.addEventListener(evt, e => {
                    e.preventDefault();
                    if (evt === 'drop' && e.dataTransfer.files.length) {
                        file.files = e.dataTransfer.files;
                        convert();           // 直接复用同一个函数
                    }
                })
            );
        })();
    </script>

</body>

</html>